<style lang="less" scoped>
	.playfather {
		height: 70rpx;
		line-height: 70rpx;
		text-align: left;
		vertical-align: middle;
		width: 60%;
		background: #F8F9FD;
		border-radius: 8rpx;
		min-width: 300rpx;
		color: #999999;
		padding: 0 20rpx;
		.play {
			width: 26rpx;
			height: 32rpx;
			position: relative;
			top: 5rpx;
		}
		.len {
			margin-left: 20rpx;
		}
	}
</style>
<template>
	<div class="playfather" @tap="soundPlay" :style="{width: width + '%'}">
		<img :src="voicePlay ? voiceIcon[1] : voiceIcon[0]" class="play">
		<span class="len">{{time}} &nbsp;′′</span>
	</div>
</template>
<script type="text/javascript">
	/**
	 * Created by PhpStorm.
	 * User:  iyahe@qq.com (天明)
	 * Date: 2020/3/16
	 * Time: 0:10
	 * Description:
	 */
	const recorderManager = wx.getRecorderManager();
	const innerAudioContext = wx.createInnerAudioContext();
	export default {
		props:{
			time: {
				type: Number,
				default: 0
			},
			urls: {
				type: String,
				default: ''
			},
			width: {
				type: Number,
				default: 50
			}
		},
		data() {
			return {
				voicePlay: false,
				voiceIcon: {}
			}
		},
		components: {},
		methods: {
			soundPlay () {
				let that = this;
				if (this.urls) {
					innerAudioContext.autoplay = true;
					innerAudioContext.src = that.urls;
					innerAudioContext.play();
					innerAudioContext.onPlay(() => {
						that.voicePlay = true;
					})
					innerAudioContext.onError((res) => {
						that.$tips.msg('播放失败');
						that.voicePlay = false;
					})
					innerAudioContext.onEnded(() => {
						that.voicePlay = false;
					})
				} else {
					that.$tips.msg('暂无音频');
				}
			}
		},
		created() {
			this.voiceIcon = this.$global.voiceIcon;
		}
	}
</script>
